<template>
  <div class="menu_list">
    <div class="big_menu">
      {{ menuTitle }}
    </div>
    <div class="menu_list_items">
      <div
        class="menu_list_item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="clickItem(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    menuList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    menuTitle: {
      type: String,
    },
  },
  methods: {
    clickItem(item) {
      this.$emit("clickItem", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.menu_list {
  background-color: #f3f3f3;
  .big_menu {
    height: 48px;
    background-color: #af251b;
    color: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  .menu_list_items {
    padding: 10px 0;
    .menu_list_item {
      padding: 10px 0;
      text-align: center;
      border-bottom: 1px solid #e0e0e0;
      color: #444;
      cursor: pointer;
      text-indent: -20px;
      font-size: 16px;
      &:hover {
        color: #fff;
        background-color: #af251b;
        font-weight: 700;
      }
    }
  }
}
</style>